<template>
  <div class="app-container" v-loading="loading">
    <el-row type="flex" style="justify-content: space-between;">
      <div style="flex: 1;min-width: 0;margin-top: 20px;margin-right: 15px;">
        <carMessage v-model="form" :state="$route.query.type" ref="carMessage" />
        <registrationInformation v-model="form" :state="$route.query.type" ref="registrationInformation" v-if="form.carRegistrationSource ==1" />
        <insuranceMessage v-model="form" :state="$route.query.type" ref="insuranceMessage" v-if="form.carInsuranceSource ==1" />
        <GPSMessage v-model="form" :state="$route.query.type" ref="GPSMessage" v-if="form.carGpsSource ==1" />
        <purchaseTax v-model="form" :state="$route.query.type" ref="purchaseTax" v-if="form.carPurchaseSource ==1" />
        <jzMessage v-model="form" :state="$route.query.type" v-if="form.carEquipSource ==1" />
      </div>
      <FlowRecord v-if="form.flowId" :id="form.flowId" />
    </el-row>

    <div style="text-align: right; background-color: #fff;padding: 10px;box-sizing: border-box;margin-top: 10px;" v-if="$route.query.type !== 'detail'">
      <el-button size="mini" @click="cancel">取消</el-button>
      <el-button size="mini" plain type="primary" @click="save" v-hasPermi="['purchaseManage:InformationPerfection:save']">保存</el-button>
      <el-button size="mini" type="primary" @click="submit" v-hasPermi="['purchaseManage:InformationPerfection:submit']">提交</el-button>
    </div>
    <div style="text-align: right; margin-top: 20px; background-color: #fff;padding: 10px;box-sizing: border-box;" v-if="$route.query.type == 'detail'">
      <el-button @click="cancel">返 回</el-button>
    </div>
  </div>
</template>
  <script>
import carMessage from "./components/carMessage";
import registrationInformation from "./components/registrationInformation";
import insuranceMessage from "./components/insuranceMessage";
import GPSMessage from "./components/GPSMessage";
import purchaseTax from "./components/purchaseTax";
import jzMessage from "./components/jzMessage";
import {
  getPerfectDetail,
  updatePerfect,
  submitPerfect,
} from "@/api/purchaseManage/sublease";
export default {
  name: "InformationView",
  components: {
    carMessage,
    registrationInformation,
    insuranceMessage,
    GPSMessage,
    purchaseTax,
    jzMessage,
  },
  data() {
    return {
      form: {
        restrictedCityFlag: null,
        dateRange: []
      },
      loading: false,
    };
  },
  created() {
    this.getPerfectDetail();
  },
  methods: {
    error() {
      this.$nextTick(() => {
        const el = document.querySelectorAll(".el-form-item__error")[0];
        el.scrollIntoView({ block: "center", behavior: "smooth" });
      });
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true;
        let refs = Object.values(this.$refs);
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index];
          if (Object.prototype.toString.call(ref) == "[object Array]") {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i];
              if (element?.valid) {
                let rc = await element?.valid?.();
                result = result && rc;
              }
              if (element?.validate) {
                let rf = await this._valid(ref);
                result = result && rf;
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, "form_validate");
                result = result && rf;
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.();
              result = result && rc;
            }
            if (ref?.validate) {
              let rf = await this._valid(ref);
              result = result && rf;
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, "form_validate");
              result = result && rf;
            }
          }
        }
        resolve(result);
      });
    },
    async getPerfectDetail() {
      this.loading = true
      let res = await getPerfectDetail(this.$route.query.id);
      this.form = res.data;
      this.loading = false

      //   this.form.gpsInstall = res.data.gpsInstall
      //     ? res.data.gpsInstall
      //     : undefined;
      //   this.form.gpsType = res.data.gpsType ? res.data.gpsType : undefined;
      //   this.form.gpsStatus = res.data.gpsStatus ? res.data.gpsStatus : undefined;
      //   this.form.businessTime = [
      //     res.data.businessStartTime ? res.data.businessStartTime : "",
      //     res.data.businessEndTime ? res.data.businessEndTime : "",
      //   ];
      //   this.form.strongTime = [
      //     res.data.strongStartTime ? res.data.strongStartTime : "",
      //     res.data.strongEndTime ? res.data.strongEndTime : "",
      //   ];
    },
    async submit() {
      let result = await this.valid();
      console.log(result, "result");
      if (result) {
        const loading = this.$loading({
          lock: true,
          text: "提交中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        submitPerfect(this.form)
          .then((res) => {
            if (res.code === 200) {
              loading.close();
              this.$message.success("提交成功");
              this.cancel()
            }
          })
          .catch(() => {
            loading.close();
          });
      } else {
        this.error();
      }
    },
    save() {
      const loading = this.$loading({
        lock: true,
        text: "保存中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.form = {
        ...this.form,
      };
      updatePerfect(this.form)
        .then((res) => {
          if (res.code === 200) {
            loading.close();
            this.$message.success("保存成功");
            this.cancel()
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    cancel() {
      this.$tab.closeOpenPage(this.$route);
      this._toPage({
        name: "InformationList",
      });
    },
  },
};
</script>


<style lang="scss" scoped>
</style>
